<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>替换班统计</title>

<link rel="stylesheet" href="css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/my.css"></link>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/agent.js"></script>
<script src="js/echarts.min.js"></script>

<script src="js/head.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/logincheck.js"></script>

</head>
<body>
	<div id="headnav"></div>
	<div id="loginholder"></div>
	<!--  
	<nav class="navbar navbar-inverse" role="navigation"
		style="margin-bottom: 0px;">
		<div class="container-fluid">
			<div class="navbar-header">
				<img src="image/front-main-logo.png" alt="TAO" />
			</div>
			<div class="nav navbar-nav">
				<ul class="nav navbar-nav">
					<li class="active"><a href="index.html">值班人员</a></li>
				</ul>
			</div>
			<div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="productData">生产数据</a></li>
				</ul>
			</div>
			<div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="peccancy">数据录入</a></li>
				</ul>
			</div>
			<div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="sms">SMS客户端</a></li>
				</ul>
			</div>
			<div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="pec_history">违章历史</a></li>
				</ul>
			</div>
			<div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="pro_history">生产数据历史</a></li>
				</ul>
			</div>
			<div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="agent_stat">替换班统计</a></li>
				</ul>
			</div>
		</div>
	</nav>
-->

	<div class="row">
		<div class="col-lg-12">
			<div class="panel-body" style="padding-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading">查询条件</div>
					<div class="panel-body">
						<form id="formSearch" class="form-horizontal">
							<div class="form-group" style="margin-top: 15px">
								<label class="control-label col-sm-1" for="search_start">起始日期</label>
								<div class="col-sm-3">
									<input type="date" class="form-control datepicker"
										id="search_start" />
								</div>
								<label class="control-label col-sm-1" for="search_end">结束日期</label>
								<div class="col-sm-3">
									<input type="date" class="form-control datepicker"
										id="search_end" />
								</div>
								<div class="col-sm-4" style="text-align: left;">
									<button type="button" style="margin-left: 50px" id="btn_query"
										class="btn btn-primary" onclick="doQuery()">查询</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="row">
		<div class="col-lg-12">
			<div class="col-md-4">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">调班申请统计</h3>
					</div>
					<table class="table" id="tablepanel">
						<tr>
							<th>部门</th>
							<th>调班次数统计</th>
						</tr>
					</table>
				</div>
			</div>

			<div class="col-md-8" id="bar_chart"
				style="width: 900px; height: 400px;"></div>

		</div>
	</div>

	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('bar_chart'));
		var option = {
			title : {
				text : ''
			},
			tooltip : {},
			legend : {
				data : [ '调班次数' ]
			},
			xAxis : {
				data : []
			},
			yAxis : {},
			series : [ {
				name : '调班次数',
				type : 'bar',
				data : [],
				itemStyle : {
					normal : {
						label : {
							show : true,
							textStyle : {
								fontWeight : 'bolder',
								fontSize : '16',
								fontFamily : '微软雅黑'
							}
						}
					}
				}
			} ]
		};
		myChart.setOption(option);
	</script>

</body>
</html>